<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>页面更新</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-for="v in numarr">{{v}}</p>
			<fieldset>
				<legend>改变原数组的方法</legend>
				<p>堆栈方法</p>
				<button type="button" @click="pushMethods">push方法</button>
				<button type="button" @click="popMethods">pop方法</button>
				<button type="button" @click="shiftMethods">shift方法</button>
				<button type="button" @click="unshiftMethods">unshift方法</button>
				<br><p>排序方法</p>
				<button type="button" @click="sortMethods">sort排序</button>
				<button type="button" @click="reverseMethods">reverse倒序</button>
				<button type="button" @click="luanxuMethods">乱序</button>
				<br><p>添加/删除方法</p>
				<button type="button" @click="spliceMethods1">splice删除1</button>
				<button type="button" @click="spliceMethods2">splice删除2</button>
				<button type="button" @click="spliceMethods3">splice删除3</button>
				<button type="button" @click="spliceMethods4">splice添加替换</button>
				<br><p>填充</p>
				<button type="button" @click="fillMethods">fill填充数组</button>
			</fieldset>
			<fieldset>
				<legend>不改变原数组的方法</legend>
				<button type="button" @click="valueOfMethods">valueOf返回原数组值</button>
				<button type="button" @click="toStringMethods">toString数组转为字符串</button>
				<button type="button" @click="joinMethods">join数组转为字符串</button>
				<button type="button" @click="concatMethods">concat拼接</button>
				<button type="button" @click="sliceMethods">slice裁剪</button>
				<button type="button" @click="indexofMethods">indexof查找</button>
				<button type="button" @click="lastindexofMethods">lastindexof从末尾查找</button>
				<button type="button" @click="includesMethods">includes查找是否存在一个元素</button>
				<button type="button" @click="keysMethods()">显示数组key值</button>
				<button type="button" @click="valuesMethods()">显示数组键值</button>
				<button type="button" @click="entriesMethods()">显示数组键和键值</button>
				<br><p>类的方法</p>
				<button type="button" @click="fromMethods()">from转换成数组</button>
				<button type="button" @click="isArrayMethods()">isArray判断是否为数组</button>
				<button type="button" @click="ofMethods()">of创建数组</button>
				<button type="button" @click="findMethods()">查找大于555的第一个数</button>
				<button type="button" @click="findIndexMethods()">查找大于555的第一个数的下标</button>
				<br><p>遍历</p>
				<button type="button" @click="forEachMethods">forEach</button>
				<button type="button" @click="mapMethods">map</button>
				<button type="button" @click="filterMethods">filter</button>
				<button type="button" @click="someMethods">some</button>
				<button type="button" @click="everyMethods">every</button>
				<button type="button" @click="mapFindMax">通过map找出每个数组的最大值组成新的数组</button>
				<!--
				 copyWithin()	将数组中的数组元素复制到指定位置或从指定位置复制。
				 reduce()	将数组的值减为单个值（从左到右）。
				 reduceRight()	将数组的值减为单个值（从右到左）。
				 -->
			</fieldset>
			<fieldset id="">
				<legend>结果输出框</legend>
				<p>{{resultBody}}</p>
			</fieldset>
			
		</div>
		<script type="text/javascript">
			let app=new Vue({
				el:'#app',
				data:{
					numarr:[123,123,456,789,555,444],
					resultBody:'',
					str:"123,456,456,789,sss,aaa",
					twoArray:[
						[1,2,3,4],
						[12,32,56,23],
						[123,321,789,456],
						[1234,4388,9999,1478]
					],
					forEachArr:[1,2,,4],
					mapArr:[1,2,3,4,5]
				},
				methods:{
					/* 改变原数组 */
					pushMethods(){
						this.resultBody="尾部添加数据，执行成功,改变原数组,返回值为增加后数组的长度"+this.numarr.push('888');
					},
					popMethods(){
						this.resultBody="删除尾部数据，执行成功,改变原数组,返回值为被删除元素"+this.numarr.pop();
					},
					shiftMethods(){
						this.resultBody="删除头部数据，执行成功,改变原数组,返回值为被删除元素"+this.numarr.shift()
					},
					unshiftMethods(){
						this.resultBody="头部添加数据，执行成功,改变原数组,返回值为增加后数组的长度"+this.numarr.unshift('888');
					},
					sortMethods(){
						this.numarr.sort( (a,b)=> b-a );
						this.resultBody="排序执行成功,改变原数组"
					},
					reverseMethods(){
						this.numarr.reverse();
						this.resultBody="倒序执行成功,改变原数组"
					},
					luanxuMethods(){
						this.numarr.sort(()=>Math.random()-0.5)
						this.resultBody="随机排序执行成功,改变原数组"
					},
					spliceMethods1(){
						this.resultBody="删除全部，执行成功，改变原数组，返回值为删除的元素"+this.numarr.splice(0);
					},
					spliceMethods2(){
						this.resultBody="删除从3开始到最后面，执行成功，改变原数组，返回值为删除的元素"+this.numarr.splice(3);
					},
					spliceMethods3(){
						this.resultBody="删除从-2开始2位，执行成功，改变原数组，返回值为删除的元素"+this.numarr.splice(-2,2);
					},
					spliceMethods4(){
						this.resultBody="添加替换，执行成功，改变原数组，返回值为删除的元素"+this.numarr.splice(0,0,555,6666,9999);
					},
					fillMethods(){
						this.resultBody=this.numarr.fill(333,2,3)+"，三个参数：（填充的数，开始位置，结束位置）";
					},
					/* 不改变原数组 */
					valueOfMethods(){
						this.resultBody=this.numarr.valueOf();
					},
					toStringMethods(){
						this.resultBody=this.numarr.toString();
					},
					joinMethods(){
						this.resultBody=this.numarr.join();
					},
					concatMethods(){
						this.resultBody=this.numarr.concat(3,[4],[3,[2]])+"对二维数组不能直接拼接，不改变原数组，返回已连接数组的副本，在ES6中有新的方法，为...，即[...this.numarr,3,[4],[3,[2]]]"
					},
					sliceMethods(){
						this.resultBody=this.numarr.slice(2,5)+"  [ )左闭右开区间，从0开始，包含左边，不包含右边；两个参数：起始位，结束位；如果不给他起始位，直接截取到最后，如果起始位<结束位不会自动翻转，位置也可以为负数";
					},
					indexofMethods(){
						this.resultBody="在数组里查找444的下标为："+this.numarr.indexOf(444)
					},
					lastindexofMethods(){
						this.resultBody="从末尾开始在数组里查找444的下标为："+this.numarr.lastIndexOf(444)
					},
					includesMethods(){
						this.resultBody="在数组里查找是否存在444："+this.numarr.includes(444)
					},
					fromMethods(){
						this.resultBody=Array.from(new Set (this.numarr))+"转换成Set类型去重，再用from转为数组类型；[...]就是Array.from的底层封装，例如前面的就是[...new Set(this.numarr)]:"+[...new Set(this.numarr)];
					},
					isArrayMethods(){
						this.resultBody=(Array.isArray(this.numarr))?"numarr是数组":"numarr不是数组";
					},
					ofMethods(){
						this.resultBody=Array.of(3,[4],5,[4,[3]])+"解决以前的创建数组的问题，输入一个参数时是数组长度，而输入多个参数就变成了数组元素";
					},
					findMethods(){
						this.resultBody=this.numarr.find( v => v > 555 );
					},
					findIndexMethods(){
						this.resultBody=this.numarr.findIndex( v => v > 555 );
					},
					keysMethods(){
						console.log(this.numarr.keys())
						this.resultBody="";
						for(var v of this.numarr.keys()){
							this.resultBody+=v+"  "
							console.log(v)
						}
					},
					valuesMethods(){
						console.log(this.numarr.values())
						this.resultBody="";
						for(var v of this.numarr.values()){
							this.resultBody+=v+"  "
							console.log(v)
						}
					},
					entriesMethods(){
						console.log(this.numarr.entries())
						this.resultBody="";
						for(var [k,v] of this.numarr.entries()){
							this.resultBody+=k+" "+v+"  "
							console.log(k,v)
						}
					},
					mapFindMax(){
						let maxArray = this.twoArray.map(item => {
							// item.sort((a,b)=>b-a);
							// return item[0]
							return Math.max(...item)
						})
						console.log(maxArray)
					},
					forEachMethods(){
						this.resultBody="1.没有返回值 2.直接跳过空值 3.不支持break、continue 4.第四个参数表示强制选择this"
						for(let i=0;i<this.forEachArr.length;i++){
							console.log(this.forEachArr[i]);
							//如果为空值，不会跳过，并且显示undefined
						}
						this.forEachArr.forEach(function(item,index,arr){
							console.log(item,index,arr)//直接跳过空值
							console.log(this)
						},this.forEachArr)//这里决定函数里的this指向 以下方法都是如此的结构
					},
					mapMethods(){
						this.resultBody="1.映射(原数组有多少个数，使用map之后的新数组也就会有多少个数) 2.有返回值 "
						let mapnew = this.mapArr.map(function(item,index,arr){
							console.log(item,index,arr);
							return item * 2
						})
						console.log(mapnew)
					},
					filterMethods(){
						this.resultBody="过滤，满足条件即可留下,浅拷贝"
						let filternew = this.mapArr.filter(function(item,index,arr){
							console.log(item,index,arr);
							return item > 2
						})
						console.log(filternew)
					},
					someMethods(){
						this.resultBody="有一个满足条件即返回真"
						let somenew = this.mapArr.some(function(item,index,arr){
							console.log(item,index,arr);
							return item > 2
						})
						console.log(somenew)
					},
					everyMethods(){
						this.resultBody="全部满足条件即返回真"
						let everynew = this.mapArr.every(function(item,index,arr){
							console.log(item,index,arr);
							return item > 2
						})
						console.log(everynew)
					}
				}
			})
		</script>
	</body>
	
</html>
